import React from 'react';
import {connect} from 'dva';
import Container from '../components/Base/Container';
import styles from './KnowledgeInfo.less';
import { Accordion, List } from 'antd-mobile';


const data=[{
  name: '孕期提示',
  img: require('../assets/孕期提示.png'),
},
  {
    name: '胎宝宝发育',
    img: require('../assets/胎宝宝发育.png'),
  },
  {
    name: '准妈妈变化',
    img: require('../assets/准妈妈变化.png'),
  },
  {
    name: '准爸准妈要知道',
    img: require('../assets/准爸准妈要知道.png'),
  },
  {
    name: '本周特别关注',
    img: require('../assets/本周特别关注.png'),
  },
  {
    name: '营养提示',
    img: require('../assets/营养提示.png'),
  },
  {
    name: '养育提示',
    img: require('../assets/孕期提示.png'),
  },
  {
    name: '发育体检',
    img: require('../assets/胎宝宝发育.png'),
  },
  {
    name: '能力发育',
    img: require('../assets/能力发育.png'),
  },
  {
    name: '育儿宝典',
    img: require('../assets/准爸准妈要知道.png'),
  },
  {
    name: '特别话题',
    img: require('../assets/特别话题.png'),
  },
  {
    name: '喂养要点',
    img: require('../assets/喂养要点.png'),
  },]

class KnowledgeInfo extends React.Component{

  whenTitle=(h1)=>{
    if(h1==='孕期'){
      return '孕期'
    }
    else if(h1==='0-1岁婴儿'){
      return '月龄'
    }
    else{
      return '年龄'
    }
  }

  ageTitle=(h1)=>{
    if(h1==='孕期'){
      return '周龄'
    }
    else if(h1==='0-1岁婴儿'){
      return '周龄'
    }
    else{
      return '月龄'
    }
  }


  render(){
    let {growthWeeklyContent}=this.props.knowledge;
    return(
      <Container title="育儿周刊">
        <div className={styles.top}>
          <div className={styles.flex}>
            <div className={styles.when}>{this.whenTitle(growthWeeklyContent.h1)}</div>
            <div className={styles.time}>{growthWeeklyContent.h2}</div>
          </div>
          <div className={styles.flex}>
            <div className={styles.when}>{this.ageTitle(growthWeeklyContent.h1)}</div>
            <div className={styles.time}>{growthWeeklyContent.age}</div>
          </div>
        </div>

        <Accordion defaultActiveKey={['0','6']} openAnimation={{}} className={styles.accordion}  >

          {
            data.map((item,index)=>{
              if(growthWeeklyContent[item.name]){
                return (
                  <Accordion.Panel key={index} header={<div className={styles.header}><img src={item.img} className={styles.img} alt=""/><span>{item.name}</span></div>}>
                      {
                        growthWeeklyContent[item.name].map((i, index)=>(
                            <div key={index} className={styles.select} >{i.trim()}</div>
                          )
                        )
                      }
                  </Accordion.Panel>
                )
              }
              return null
            })
          }

        </Accordion>

      </Container>

    )
  }
}

export default connect(({knowledge})=>({knowledge}))(KnowledgeInfo);
